<template>
  <div class="MedicinaModifylTable-container">
    <el-table
      ref="tRef"
      :data="tableData"
      border
      :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="medicineName" label="药品名称" width="100">
        <template #default="scope">
          <span :class="{ 'disabled-font': disabled }">
            {{ scope.row.medicineName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="dosageForm" label="剂型" width="160">
        <template #default="scope">
          <span :class="{ 'disabled-font': disabled }">
            {{ scope.row.dosageForm }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="spec" width="100" label="规格">
        <template #default="scope">
          <span :class="{ 'disabled-font': disabled }">
            {{ scope.row.spec }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="singleDosage" width="140" label="用量">
        <template #default="scope">
          <div
            class="medicina-cell"
            :class="{
              'medicina-err-cell': isErr(scope.row.singleDosage, checking),
            }"
          >
            <el-input
              :disabled="disabled"
              v-model="scope.row.singleDosage"
            ></el-input>
            <span style="width: 30%">{{ scope.row.unit }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="frequency" label="频次">
        <template #default="scope">
          <div class="medicina-cell">
            <el-select
              :disabled="disabled"
              v-model="scope.row.frequency"
              :class="{
                'medicina-err-cell': isErr(scope.row.frequency, checking),
              }"
            >
              <el-option
                v-for="item in frequencys"
                :key="item.id"
                :label="item.termChs"
                :value="item.termChs"
              >
                <span style="float: left">{{ item.termChs }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                >
                  {{ item.termLatinAbbr }}
                </span>
              </el-option>
            </el-select>
            <el-input
              v-if="isCustom(scope.row.frequency)"
              v-model="scope.row.useCustom"
              :class="{
                'medicina-err-cell': isErr(scope.row.useCustom, checking),
              }"
            ></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="usage" label="用法">
        <template #default="scope">
          <div class="medicina-cell">
            <el-select
              :disabled="disabled"
              v-model="scope.row.usage"
              :class="{ 'medicina-err-cell': isErr(scope.row.usage, checking) }"
            >
              <el-option
                v-for="item in usages"
                :key="item.id"
                :label="item.termChs"
                :value="item.termChs"
              />
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="doseTotal" width="150px" label="发药总量">
        <template #default="scope">
          <div class="medicina-cell">
            <el-input
              :disabled="disabled"
              v-model="scope.row.doseTotal"
              :class="{
                'medicina-err-cell': isErr(scope.row.doseTotal, checking),
              }"
            ></el-input>
            <span :class="{ 'disabled-font': disabled }">
              {{ scope.row.packagingUnit }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name4" label="移除">
        <template #default="scope">
          <div class="medicina-cell">
            <el-button
              :disabled="disabled"
              size="small"
              type="danger"
              @click="del(scope.$index, scope.row)"
            >
              移除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import emr from '@/hooks/emr.vue'
  import { computed, ref } from '@vue/runtime-core'
  import { ElMessage } from 'element-plus'
  export default {
    name: 'MedicinaModifylTable',
    props: { modelValue: Array, disabled: Boolean },
    emits: ['update:modelValue'],
    setup(props, context) {
      // TODO 用量规格 是否需要后台登录id
      // TODO 这里需要优化 所有值从外部传入
      const tableData = computed(() => {
        return props.modelValue.map((item, index) => {
          if (!hashFrequencys[item.frequency]) {
            if (item.frequency !== '自定义') item.useCustom = item.frequency
            item.frequency = '自定义'
          }
          return item
        })
      })

      const isErr = computed(() => {
        function check(val, checking) {
          if (!checking) return false
          return val ? false : true
        }
        return check
      })

      const del = function (index) {
        tableData.value.splice(index, 1)
        context.emit('update:modelValue', tableData.value)
      }

      const tRef = ref(null)
      const hoverChange = function () {
        console.log('hoverChange')
        tRef.value.setCurrentRow(-1)
      }

      const checking = ref(false)
      const getCheckData = function () {
        const arr = ['spec', 'frequency', 'usage', 'doseTotal']
        checking.value = TextTrackCueList
        const checkeds = tableData.value.filter((element) => {
          const tmp = arr.filter((item) => {
            return element[item] ? true : false
          })
          if (element['frequency'] === '自定义' && !element.useCustom)
            return false
          return tmp.length >= 4
        })
        if (checkeds.length === 0 && tableData.value.length === 0) {
          ElMessage.error({ message: '至少添加一项' })
          return null
        } else if (checkeds.length < tableData.value.length) {
          ElMessage.error({ message: '需要将数据补充完整' })
          return null
        }
        // 将自定义的输入的元素提交给外部
        const list = checkeds.map((item) => {
          if (item.frequency === '自定义') item.frequency = item.useCustom
          return item
        })
        return JSON.parse(JSON.stringify(list))
      }

      // 控制自定义输入框显示或者隐藏
      const { hashFrequencys } = emr()
      const isCustom = computed(() => {
        return (key) => {
          return !hashFrequencys[key]
        }
      })
      return {
        tableData,
        ...emr(),
        del,
        hoverChange,
        isErr,
        checking,
        getCheckData,
        isCustom,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .MedicinaModifylTable-container {
    margin-bottom: 20px;

    :deep(.el-table) {
      & td {
        padding: 0px;

        .cell {
          padding: 0px;
        }
      }
    }

    .medicina-cell {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-select {
        width: 100%;
      }

      :deep(.el-input__wrapper) {
        border-radius: 0;
        border-color: transparent;
        padding-left: 0;
        padding-right: 0;
        border-width: 0px;
        box-shadow: none !important;
        vertical-align: middle;
        text-align: center;
        background-color: initial;

        &:hover {
          border: 1px solid #409eff !important;
          cursor: default;
        }
      }

      span {
        padding-left: 5px;
        padding-right: 5px;
      }
    }

    .medicina-err-cell {
      :deep(.el-input__wrapper) {
        border-width: 0.5px;
        border: 1px solid #ff6464 !important;

        &:hover {
          border: 1px solid #ff6464 !important;
          cursor: default;
        }
      }
    }

    .cell-center {
      display: flex;
      align-items: center;
    }
  }
</style>
